.@{prefix}-container-model-relation-celltool {
  display: flex;
  flex-direction: row;
  background: @background-color;
  border-radius: 5px;
  padding: 5px 10px;
  border: 1px solid @primary-second-border-color;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  //&-line {
  //  border-left: 1px solid @primary-second-border-color;
  //  cursor: default;
  //  padding: 0 !important;
  //  margin-left: 5px;
  //}
  //&-item {
  //  & + & {
  //    margin-left: 5px;
  //  }
  //  &-group {
  //    display: flex;
  //    flex-direction: row;
  //    & > div {
  //      padding: 3px;
  //      &:hover {
  //        cursor: pointer;
  //        background: @background-second-color;
  //      }
  //    }
  //    & + & {
  //      margin-left: 5px;
  //    }
  //  }
  //}
  &-detail {
    overflow: auto;
    background: @background-color;
    position: absolute;
    top: 46px;
    left: 0;
    padding: 5px;
    box-shadow: 0 0 6px 2px @primary-border-color;
    &-cell {
      display: inline-flex;
      width: 65px;
      height: 100%;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding-left: 10px;
      padding-right: 5px;
      input, .@{prefix}-components-input {
        width: 100%;
      }
    }
    &-button {
      display: inline-block;
      margin-left: 5px;
      .@{prefix}-components-button {
        padding: 2px 4px;
        height: auto;
        min-width: auto;
      }
    }
    &-fill {
      padding: 5px;
      width: 270px;
      display: flex;
      flex-direction: column;
      &-stroke-icon {
        &:before {
          content: " ";
          position: absolute;
          border-radius: 50%;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border: 1px solid rgba(2,9,16,.13);
          z-index: 99;
        }
        border-radius: 50%;
        background: url("transparent.svg") repeat;
        margin-top: 4px;
        display: inline-block;
        width: 18px;
        height: 18px;
        position: relative;
        & > span {
          display: flex;
          flex-direction: column;
          align-items: center;
          border: 9px solid;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          position: relative;
          &:before {
            content: "";
            position: absolute;
            width: 7px;
            height: 7px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 99;
            background: @background-color;
            border: 1px solid rgba(2,9,16,.13);
            border-radius: 50%;
          }
        }
      }
      &-icon {
        &:before {
          content: " ";
          position: absolute;
          border-radius: 50%;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border: 1px solid rgba(2,9,16,.13);
          z-index: 99;
        }
        border-radius: 50%;
        background: url("transparent.svg") repeat;
        margin-top: 4px;
        display: inline-block;
        width: 18px;
        height: 18px;
        position: relative;
        & > span {
          display: flex;
          flex-direction: column;
          align-items: center;
          border: 9px solid;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          position: relative;
        }
      }
      &-item {
        display: flex;
        flex-direction: column;
        & + & {
          margin-top: 8px;
        }
        & > span {
          & > span:first-child {
            font-weight: bold;
          }
        }
        & > span:first-child {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
        }
        &-list {
          margin: 5px 0;
          background: @background-second-color;
          border-radius: 3px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          & > span {
            text-align: center;
            cursor: pointer;
            padding: 5px;
            width: 30%;
          }
          &-active {
            background: @background-color;
            border: 1px solid @primary-border-color;
            box-shadow: 0 2px 4px @button-shadow;
          }
        }
      }
      &-color {
        &-notColor {
          &::after {
            content: '';
            display: inline-block;
            box-sizing: border-box;
            position: relative;
            width: 18px;
            height: 0.5px;
            background-color: @third-font-color;
            top: -7px;
            transform: rotate(-45deg);
          }
        }
        &-active {
          border: 1.5px solid @primary-color;
        }
        &-container {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
        margin-left: 5px;
        margin-top: 5px;
        border-radius: 3px;
        border: 1.5px solid @primary-border-color;
        display: inline-block;
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }
    &-font {
      &-style {
        & > span + span {
          margin-left: 5px;
        }
        & > span {
          cursor: pointer;
        }
        &-active {
          color: @primary-color;
        }
      }
      &-size {
        display: flex;
        flex-direction: column;
        &-active {
          background: @second-primary-color;
          color: @primary-color;
        }
        & > span {
          display: inline-flex;
          flex-direction: row;
          align-items: center;
          padding: 5px 10px;
          cursor: pointer;
          height: 34px;
          & > span:first-child {
            display: inline-block;
            width: 18px;
          }
          &:hover {
            background: @second-primary-color;
            color: @primary-color;
          }
        }
      }
      &-align {
        &-active {
          background: @second-primary-color;
          color: @primary-color;
          border-radius: 5px;
        }
        & > div {
          & > span {
            &:hover {
              background: @second-primary-color;
              color: @primary-color;
            }
            padding: 5px;
            cursor: pointer;
          }
        }
        & > div:first-child {
          padding-bottom: 5px;
        }
        & > div:last-child {
          padding-top: 5px;
        }
        & > div + div {
          border-top: 1px solid @primary-border-color;
        }
      }
    }
    &-node-shape {
      display: flex;
      flex-direction: column;
      & > span {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        padding: 5px 10px;
        cursor: pointer;
        height: 34px;
        &:hover {
          background: @second-primary-color;
          color: @primary-color;
        }
      }
    }
    &-marker {
      display: flex;
      flex-direction: column;
      &-border {
        border-top: 1px solid @primary-border-color;
      }
      &-active {
        background: @second-primary-color;
        color: @primary-color;
      }
      & > span {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        padding: 5px 10px;
        cursor: pointer;
        height: 34px;
        & > span:first-child {
          display: inline-block;
          width: 18px;
        }
        &:hover {
          background: @second-primary-color;
          color: @primary-color;
        }
      }
    }
    &-link {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 10px 50px 30px 50px;;
      & > span:nth-child(2) {
        margin-top: 19px;
      }
      &-item {
        .@{prefix}-components-tree-select {
          width: 440px !important;
        }
        display: flex;
        white-space: nowrap;
        flex-direction: row;
        align-items: center;
        .@{prefix}-components-input-blur, .@{prefix}-components-input-focus {
          border-radius: 0 !important;
          & > input {
            border-radius: 0 !important;
          }
        }
        & > span:first-child {
          margin-right: 5px;
        }
        & > span:nth-child(3) {
          background: @primary-color;
          color: @background-color;
          padding: 0 5px;
          border-top-right-radius: 2px;
          border-bottom-right-radius: 2px;
          cursor: pointer;
        }
        input {
          cursor: text;
          width: 180px;
        }
        .@{prefix}-components-tree-select {
          width: 220px;
        }
      }
      &-button {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 5px;
        & > span {
          border: 1px solid @primary-border-color;
          padding: 3px 8px;
          border-radius: 3px;
          cursor: pointer;
        }
        & > span:last-child {
          background: @primary-color;
          color: @background-color;
        }
        & > span + span {
          margin-left: 10px;
        }
      }
    }
    &-node-size {
      display: flex;
      flex-direction: column;
      i:hover {
        cursor: pointer;
      }
      &-lock {
        color: @primary-color;
      }
      input {
        width: 100px;
      }
      &-input {
        & > span + span {
          margin-top: 5px;
        }
        display: flex;
        flex-direction: column;
        &-label {
          margin-right: 5px;
        }
      }
      & > span + span {
        margin-top: 5px;
      }
      & > span {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }
    &-label {
      padding: 5px;
      &-button {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 5px;
        & > span {
          border: 1px solid @primary-border-color;
          padding: 3px 8px;
          border-radius: 3px;
          cursor: pointer;
        }
        & > span:last-child {
          background: @primary-color;
          color: @background-color;
        }
        & > span + span {
          margin-left: 10px;
        }
      }
    }
  }
  &-highlight {
    position: absolute;
    border: 3px dashed @primary-color;
    pointer-events: none;
  }
  &-customer-color {
    &-picker {
      position: fixed;
      left: 0;
      top: 0;
    }
  }
  &-twinkle {
    @keyframes twinkle {
      from {
        border: 3px solid @second-primary-color;
      }
      to {
        border: 3px solid @primary-color;
      }
    }
    animation: twinkle 0.3s linear 0s 3;
    position: absolute;
    pointer-events: none;
  }
  &-editnode {
    &-notes {
      & > textarea {
        background-color: #ffd591;
      }
    }
    & > textarea {
      border: none;
      outline: none;
      width: 100%;
      height: 100%;
      resize: none;
    }
  }
  &-nodesize {
    pointer-events: none;
    text-align: center;
    & > span {
      background: @primary-color;
      color: @background-color;
      padding: 2px 5px;
    }
  }
  &-tab {
    //display: flex;
    //flex-direction: column;
    //background: @background-color;
    //border-radius: 5px;
    //padding: 5px 10px;
    //border: 1px solid @primary-second-border-color;
    //overflow: hidden;
    //white-space: nowrap;
    //user-select: none;
    //&-top {
    //  font-size: 12px;
    //  &-active {
    //    border-bottom: 3px solid @primary-color !important;
    //  }
    //  & > span {
    //    display: inline-block;
    //    box-sizing: content-box;
    //    padding: 2px 6px 2px 6px;
    //    margin-bottom: 3px;
    //    border-bottom: 3px solid transparent;
    //    cursor: pointer;
    //  }
    //}
    //&-bottom {
    //  display: flex;
    //  flex-direction: row;
    //  overflow: hidden;
    //  white-space: nowrap;
    //  user-select: none;
    //}
  }
  &-edge-relation {
    &-item {
      margin-top: 5px;
      &-title {
        padding: 3px 15px;
      }
      &-content {
        margin: 5px;
        border: 1px solid @primary-border-color;
        box-shadow: 0 0 6px 2px @primary-border-color;
        border-radius: 5px;
        padding: 15px 5px;
        display: flex;
        flex-direction: row;
      }
    }
  }
  &-jump-over {
    &-start {
      & > i {
        color: @primary-color;
      }
    }
    &-end {

    }
  }
}
